import { Layout, Menu } from 'antd';
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import {NavLink, Route, Redirect} from 'react-router-dom';

import './index.css';
import SingManage from './SingManage/index';

import UserManage from './UserManage/index';

import ForumManage from './ForumManage/index';

const { Header, Content, Footer, Sider } = Layout;

const Main = (props) => {
  return (
    <Layout>
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
        onBreakpoint={broken => {
          console.log(broken);
        }}
        onCollapse={(collapsed, type) => {
          console.log(collapsed, type);
        }}
      >
        <div className="logo" />
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} className="menu">
          <Menu.Item key="1" icon={<UserOutlined />}>
            <NavLink activeClassName="active" to="/admin/userManage">用户管理</NavLink>
        </Menu.Item>
          <Menu.Item key="2" icon={<VideoCameraOutlined />}>
          <NavLink activeClassName="active" to="/admin/singManage">歌曲管理</NavLink>
        </Menu.Item>
          <Menu.Item key="3" icon={<UserOutlined />}>
          <NavLink activeClassName="active" to="/admin/forumManage">论坛管理</NavLink>
        </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
        <Content style={{ margin: '24px 16px 0' }}>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
            <Route path="/admin/userManage" render={()=><UserManage />} />
            <Route path="/admin/singManage" render={()=><SingManage />} />
            <Route path="/admin/forumManage" render={()=><ForumManage /> } />
            <Redirect to="/admin/userManage" ></Redirect>
        </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  )
}



export default Main;